<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" id='ip'>
    值<span id="sp"></span>
    <script>
        // 1.什么什么是Object.defineProperty()
        // 2：双向数据绑定的原理,
        // 3.演示
        // 4.案例



        // 1.什么什么是Object.defineProperty() 方法   是对象监听到的是属性 不能直接赋值 要用this.$set / push
        //setter和geter  
        // setter: 设置值(参数){ return }
        // getter: 获取值的(){ },

        
        // 2：双向数据绑定的原理, 
        // 数据劫持和订阅者发布者来完成的
        // Object.defineProperty('对象', '属性名字', { 特性: get和set })

        // let a = {}
        // Object.defineProperty(a, 'name', { 
        //     get: function () {         //获取 
        //         console.log('我获取了');   
        //     },
        //     set: function (val) {
        //         console.log('我设置了');
        //         console.log(val);
        //     },
        // })bb
        // a.name = '包家旺'
        // let b = a.name
        //他们的执行顺序就是先执行  set  --get  因为你设置了getLog出来这个打印结果

        // 双向数据绑定v-model背后的原理
        var ip = document.getElementById('ip')
        var sp = document.getElementById('sp')
        var ll = {}
        //我ll对象来获取input的值 再通过object.defineProperty
        Object.defineProperty(ll, 'name', {
            set: function (val) {
                sp.innerHTML = val
            },
            get: function () { },
        })
        ip.addEventListener('input', function (e) {         ///addEventListener对input进行监听
            console.log(e);
            ll.name = e.target.value
        })
        
        Object.defineProperty(ll,"name",{
            set:function(val){
                sp.innerHTML = val
            },
            get:function(){},
        })

        ip.addEventListener('input',function(e){
            console.log(e);
            ll.name = e.target.value;
        })

        // 3 原生js来实现v-model  3
        // var ip = document.getElementById('ip')
        // var sp = document.getElementById('sp')
        // var ll = {}
        // //我ll对象来获取input的值 再通过object.defineProperty
            
        // ip.addEventListener('input', function (e) {         //addEventListener对input进行监听
        //     sp.innerHTML = e.target.value
        // })

    </script>
</body>


</html>